import React, { Component } from "react";

export class NavBar extends Component {
  render() {
    const children = this.props.children;
    return (
      <div className="nav-bar">
        <div className="nav-item nav-left">{children[0]}</div>
        <div className="nav-item nav-center">{children[1]}</div>
        <div className="nav-item nav-right">{children[2]}</div>
      </div>
    );
  }
}

export class NavBar2 extends Component {
  render() {
    const { leftSlot, centerSlot, rightSlot } = this.props;
    return (
      <div className="nav-bar">
        <div className="nav-item nav-left">{leftSlot}</div>
        <div className="nav-item nav-center">{centerSlot}</div>
        <div className="nav-item nav-right">{rightSlot}</div>
      </div>
    );
  }
}
